<template>
  <div class="container">
    <el-card>
      <!-- 面包屑 -->
      <el-row v-show="paramsValue">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item
            class="pointer"
            @click="prev"
          >{{
            this.requestParameters.subjectName
          }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <el-row>
        <el-form
          ref="requestParameters"
          label-width="150px"
          :inline="true"
        >
          <el-form-item label="目录名称">
            <el-input v-model="requestParameters.directoryName"></el-input>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="requestParameters.state">
              <el-option
                label="已启用"
                value="1"
              ></el-option>
              <el-option
                label="已禁用"
                value="0"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 按钮 -->
          <el-button @click="clear">清除</el-button>
          <el-button
            type="primary"
            @click="handleFilter"
          >搜索</el-button>
          <!-- 返回 -->
          <span class="right">
            <el-link
              type="primary"
              icon="el-icon-back"
              @click="prev"
              v-if="paramsValue"
            >返回学科</el-link>
            <el-button
              type="success"
              icon="el-icon-edit"
              class="add"
              @click="add"
            >新增目录</el-button>
          </span>
        </el-form>
      </el-row>
      <!-- 警示框 -->
      <el-row>
        <el-alert
          :title="'一共' + counts + '条数据'"
          type="success"
          show-icon
        >
        </el-alert>
      </el-row>
      <el-table
        :data="items"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
        > </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
        > </el-table-column>
        <el-table-column
          prop="directoryName"
          label="目录名称"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者"
        > </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期"
        >
          <template slot-scope="scope">
            {{
              scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="counts"
          label="面试题数量"
        > </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
        >
          <template slot-scope="scoped">
            {{ scoped.row.state == 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scoped">
            <el-link
              type="primary"
              @click="stateChange(scoped.row)"
            >
              <span v-if="scoped.row.state == 1">禁用</span>
              <span v-else>启用</span>
              <!-- {{
              scoped.row.state == 1 ? "禁用" : "启用"
            }} -->
            </el-link>
            <el-link
              type="primary"
              :disabled="scoped.row.state == 0"
              @click="edit(scoped.row.id, scoped.row.subjectName)"
            >
              修改</el-link>
            <el-link
              type="primary"
              :disabled="scoped.row.state == 0"
              @click="deleted(scoped.row.id)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="requestParameters.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="requestParameters.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 修改弹出框 -->
    <el-dialog
      title="修改目录"
      :visible.sync="editDialog"
      width="30%"
    >
      <!-- 内容 -->
      <!-- 从学科进来 -->
      <el-form
        ref="editFormRefs"
        :model="editItem"
        label-width="80px"
        :rules="editFormRules"
        v-if="paramsValue"
      >
        <el-form-item
          label="目录名称"
          prop="directoryName"
        >
          <el-input
            class="editInp"
            v-model="editItem.directoryName"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 从目录进来 -->
      <el-form
        ref="editFormRefs"
        :model="editItem"
        label-width="80px"
        :rules="editFormRules"
        v-else
      >
        <el-form-item label="所属学科">
          <el-select
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in addItemtwo"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="目录名称"
          prop="directoryName"
        >
          <el-input
            class="editInp"
            v-model="editItem.directoryName"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editClose"
        >确 定</el-button>
      </span>
    </el-dialog>0
    <!-- 新增 -->
    <el-dialog
      title="新增目录"
      :visible.sync="addDialog"
      width="30%"
    >
      <!-- 内容 -->
      <!-- 从学科进来出现的内容 -->
      <el-form
        ref="addFormRefs"
        label-width="80px"
        :model="addItem"
        :rules="addFormRules"
        v-if="paramsValue"
      >
        <el-form-item
          label="目录名称"
          prop="directoryName"
        >
          <el-input
            class="editInp"
            v-model="addItem.directoryName"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 从目录进来出现的内容 -->
      <el-form
        ref="addFormRefs"
        label-width="80px"
        :model="addItem"
        :rules="addFormRules"
        v-else
      >
        <el-form-item label="所属学科">
          <el-select
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in addItemtwo"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="目录名称"
          prop="directoryName"
        >
          <el-input
            class="editInp"
            v-model="addItem.directoryName"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addClose"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  detail,
  update,
  remove,
  add,
  changeState
} from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { status } from '@/api/hmmm/constants.js'
// import addMen from '@/module-hmmm/components/directorys-add'
export default {
  name: 'directorysItem',
  components: {
    // addMen
  },

  data() {
    return {
      items: [],

      nameValue: '',
      statuValue: '',
      requestParameters: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        directoryName: null,
        state: null
      },
      counts: 0,
      // 弹出框
      editDialog: false,
      editItem: {
        subjectID: '',
        directoryName: ''
      },
      // 修改弹出框验证
      editFormRules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      // 添加
      addDialog: false,
      addItemtwo: {},
      addItem: {
        subjectID: '',
        directoryName: ''
      },
      addFormRules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      addtwo: {},
      value: '',
      // 搜索
      searchName: {},
      // 判断接收到值没有
      paramsValue: false
    }
  },
  computed: {
    status: function () {
      return status
    }
  },
  mounted() { },
  created() {
    this.requestParameters.subjectID = this.$route.query.id
    this.requestParameters.subjectName = this.$route.query.name
    this.paramsSet()
    this.getList()
  },
  methods: {
    getList() {
      list(this.requestParameters)
        .then((data) => {
          this.items = data.data.items
          this.counts = data.data.counts
        })
        .catch((e) => {
          this.$message.e('错了哦，这是一条错误消息')
        })
    },
    // 判断有没有传值过来
    paramsSet() {
      if (this.$route.query.id) {
        this.paramsValue = true
      } else {
        this.paramsValue = false
      }
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      console.log(val)
      this.requestParameters.pagesize = val
      this.getList()
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val
      this.getList()
    },
    // 修改
    // 弹出框显示
    async edit(id, subjectName) {
      this.editDialog = true
      console.log(subjectName)
      const res = await detail({ id })
      this.editItem.id = res.data.id
      this.editItem.subjectID = res.data.subjectID
      this.editItem.directoryName = res.data.directoryName
      this.value = subjectName
      const result = await simple()
      this.addItemtwo = result.data
    },
    // 修改数据
    async editClose() {
      this.$refs.editFormRefs.validate(async (vaild) => {
        if (vaild) {
          const id = this.editItem.id
          const res = await update({
            id,
            subjectID: this.editItem.subjectID,
            directoryName: this.editItem.directoryName
          })
          console.log(res)
          console.log(res.status)

          if (res.status !== 200) {
            return this.$message.error('修改失败')
          }
          // this.editForm = res.data
          this.editDialog = false
          this.getList()
          this.$message.success('修改成功')
        }
      })
    },

    // 删除
    deleted(id) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          remove({ id })
            .then(() => {
              this.$message.success('成功删除了用户' + '!')
              this.getList()
            })
            .catch((response) => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },

    //  新增用户
    async add() {
      this.addDialog = true
      const res = await simple()
      console.log(res)
      this.addItemtwo = res.data
      console.log(this.addItemtwo)
    },
    async addClose() {
      // 得到了学科的ID号
      console.log(this.value)
      this.$refs.addFormRefs.validate(async (valid) => {
        if (!valid) return
        if (this.$route.query.id) {
          this.addItem.subjectID = this.$route.query.id - 0
        } else {
          this.addItem.subjectID = this.value
        }
        // this.addItem.subjectID = this.$route.query.id - 0
        // this.addItem.subjectID = this.value
        const result = await add(this.addItem)
        if (result.status !== 200) {
          this.$message.error('添加用户失败')
        }
        this.$message.success('添加用户成功')
        this.addDialog = false
        this.value = ''
        this.addItem.directoryName = ''
        this.getList()
      })
    },
    clear() {
      this.requestParameters.directoryName = null
      this.requestParameters.state = null
      this.getList()
    },
    // 搜索
    handleFilter() {
      this.requestParameters.page = 1
      if (this.requestParameters.state === null) {
        this.$message.error('请选中状态')
        return
      }
      this.getList(this.requestParameters)
    },
    // 状态的改变
    async stateChange(val) {
      var id = val.id
      // 如果我们的状态为1得话,我们点击了之后就为0,如果我们的状态为0的话,我们点击了之后状态就改变为1
      var state = val.state ? 0 : 1

      await changeState({ id, state })
        .then((response) => {
          this.$message.success('已成功修改')
          this.getList()
        })
        .catch((response) => {
          this.$message.error(status + '失败!')
        })
    },
    // 返回上一页
    prev() {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang='less'>
.el-card {
  margin: 10px;
}
/deep/.el-input {
  width: 200px;
}
.el-breadcrumb {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #9d9f99;
}
.el-button {
  width: 70px;
  height: 35px;
}
.right {
  // width: 200px;
  height: 35px;
  margin-left: 100px;
}
.right .add {
  width: 120px;
}
.el-breadcrumb {
  .el-breadcrumb-item {
    color: #9d9f99 !important;
  }
}
.el-table {
  margin-top: 10px;
}
.el-link {
  margin-right: 5px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
.pointer {
  cursor: pointer;
}
</style>
